<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jquery基础</title>
    <style>
    </style>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>

</head>

<body>
    <script>

        // 文档加载完成写法二
        $(function () {
            // 开始写 jQuery 代码...
            // $("button").click(function(){
            //     // 返回所有匹配的span元素的父元素
            //     alert($("span").parent());
            // });

            // $("button").click(function(){
            //     // 返回所有匹配的span元素的所有父元素
            //     alert($("span").parents());
            // });

            // $("button").click(function(){
            //     // 返回所有匹配的span元素的所有父元素并且是ul
            //     alert($("span").parents("ul"));
            // });

            // $("button").click(function(){
            //     // 返回所有匹配的span元素到父元素body之间的所有父元素
            //     // 注意，不包括body父元素
            //     alert($("span").parentsUntil("body").text());
            // });
            // $("button").click(function(){
            //     // 返回每个div下面的直接子元素
            //     $("div").children().css({"border":"2px solid red"});
            // });

            // $("button").click(function(){
            //     // 返回每个div下面的直接子元素并且是span
            //     $("div").children("span").css({"border":"2px solid red"});
            // });

            // $("button").click(function(){
            //     // 返回每个div下面所有子元素并且是span
            //     $("div").find("span").css({"border":"2px solid red"});
            // });

            // $("button").click(function(){
            //     // 返回每个div下面所有子元素
            //     $("div").find("*").css({"border":"2px solid red"});
            // });

            $("button").click(function(){
                // 返回第二个p元素
                $("p").eq(1);
            });
        });

    </script> 这是body里的内容
    <div>
        这是第一个div里的内容
        <span>第一个span</span>
        <p>
            <span>第一个下面的span</span>
        </p>
    </div>
    <button>显示</button>
    <div>
        这是第二个div里的内容
        <span>第二个span</span>
        <p>
            <span>第二个下面的span</span>
        </p>
    </div>
</body>

</html>